<template>
  <div>
    <div class=" ">
      <el-calendar v-model="DateDayFormat" ref="calendar" class="r10">
        <template #header="{ date }">
          <el-form>
            <el-form-item :label="TypesUser[props.type]">
              <el-input
                clearable
                readonly
                v-model="showUserData.Name"
                style="width: 200px"
                :placeholder="`请选择${TypesUser[props.type]}进行查询`"
                @click="showSelectUser"
              ></el-input>
            </el-form-item>
          </el-form>
          <span>{{ date }}</span>
          <el-button-group>
            <el-button size="small" @click="selectDate('prev-month')">
              上个月
            </el-button>
            <el-button size="small" @click="selectDate('today')"
              >今天</el-button
            >
            <el-button size="small" @click="selectDate('next-month')">
              下个月
            </el-button>
          </el-button-group>
        </template>
        <template v-slot:dateCell="{ data }">
          <div class="h100" @click.stop="handleClickDate(data.day)">
            <div class="activeBar" v-if="data.day == NowDateDay"></div>
            <div class="flex acenter jcenter h100">
              <div class="tcenter width100" style="padding: 0 10px">
                <div>{{ filterDate(data.day) }}</div>
                <div
                  class="cbtn"
                  v-for="(item, index) in filterDateItem(data.day)"
                  :key="index"
                >
                  {{ item.Name }}
                </div>
                <!-- <div class="cbtn">机械课</div> -->
                <!-- <div class="cbtn more">更多信息</div> -->
              </div>
            </div>
          </div>

          <!-- <div @click.stop="handleClickDate(data.day)" class="dateBox">
            <div>{{ filterDate(data.day) }}</div>
            <div v-if="filterDateItem(data.day) > 0" class="tcenter">
              <span class="courseCount"> {{ filterDateItem(data.day) }}</span>
              <span class="courseCountText">节课</span>
            </div>
          </div> -->
        </template>
      </el-calendar>
    </div>

    <!-- 课程列表 -->
    <MyDialog v-model:show="showCourseList" :title="title" :showFooter="false">
      <MyTable
        :columns="columns2"
        :toolbar="false"
        :tableList="courseList"
      ></MyTable>
      <div style="font-size: 18px; color: #303133" class="mgt20 mgb10">
        考试信息
      </div>
      <MyTable
        :columns="exameColumns"
        :toolbar="false"
        :tableList="exameList"
      ></MyTable>
    </MyDialog>

    <!-- 选择用户 -->
    <MyDialog v-model:show="showUserList" :title="title" @confirm="confirm">
      <UserTable
        :userColumns="columns"
        @radio="handleRadio"
        :query="{ Type: props.type == 1 ? 1 : 2 }"
        :activeRadio="showUserData.ID"
        :Type="true"
        :showAdd="false"
      ></UserTable>
    </MyDialog>
  </div>
</template>

<script setup name="CourseScheduleList">
import UserTable from '@/views/system/User/index';
import {
  GetAlreadyScheduleDate,
  GetScheduleDateDetail
} from '@/api/schedule/class.js';
import { getCurrentInstance } from 'vue';

const props = defineProps({
  type: {
    default: 1
  },
  myCourse: {
    default: false
  }
});
const { proxy } = getCurrentInstance();
const calendar = ref();
const NowDateDay = proxy.$moment(new Date()).format('YYYY-MM-DD');
let dateList = [];
const tableList = ref([]);
const courseList = ref([]);
const look = ref(true);
const title = ref('');
const formData = ref({});
const showUserList = ref(false);
const formRef = ref({});
const DateDay = ref({});
const DateDayFormat = ref();
const selectUser = ref({});
const showUserData = ref({});
const showCourseList = ref(false);
const exameList = ref([]);
const columns = ref([
  { label: '单选框', width: 80, prop: 'ID' },
  { label: '序号' },
  { label: '登录账户', prop: 'Account' },
  { label: '用户名称', prop: 'Name' },
  { label: '电话号码', prop: 'Phone' },
  { label: '创建时间', prop: 'CreateTime' },
  { label: '创建人', prop: 'CreateUser', user: true }
]);
const columns2 = ref([
  { label: '启止时间', prop: 'StartAndEnd' },
  { label: '班级', prop: 'Name_Class' },
  { label: '场地', prop: 'Name_Place' },
  { label: '课程', prop: 'Name_Course' },
  { label: '教师', prop: 'Name_Teacher' },
  { label: '教学装备', prop: 'Name_Device' },
  { label: '课时', prop: 'CourseHour' }
]);

const exameColumns = ref([
  // { label: "序号" },
  // { label: "日期", prop: "DateDay" },
  { label: '启止时间', prop: 'StartAndEnd' },
  { label: '班级', prop: 'Name_Class', color: '' },
  { label: '场地', prop: 'Name_Place' },
  { label: '关联课程', prop: 'Name_Course', color: '' },
  { label: '监考老师', prop: 'Name_Teacher', color: '' },
  { label: '关联设备', prop: 'Name_Device', color: '' },
  { label: '关联证书', prop: 'Name_Certificate', color: '' }
]);
proxy.$formatKey(exameColumns.value);
proxy.$formatKey(columns.value);
proxy.$formatKey(columns2.value);

const TypesUser = {
  1: '学员',
  4: '教师'
};

const formLabel = ref({
  course: '课程',
  teacher: '教师',
  device: '设备'
});

const selectDate = val => {
  look.value = false;
  calendar.value.selectDate(val);
};

function confirm() {
  showUserData.value = selectUser.value;

  if (props.type == 1) {
    if (!showUserData.value.ID_Class) {
      return proxy.$modal.msgError('请先绑定班级');
    }
  }
  if (props.type == 4) {
    if (!showUserData.value.ID) {
      return proxy.$modal.msgError('请先选择教师');
    }
  }

  look.value = false;
  getList();

  showUserList.value = false;
}

function filterDate(date) {
  if (dateList.length != 42) dateList.push(date);
  if (dateList.length == 42) {
    getList();
    dateList = [];
  }
  return Number(date?.slice(8));
}

async function getList() {
  if (props.type == 1 && !selectUser.value.ID_Class) return;
  if (props.type == 4 && !selectUser.value.ID) return;
  if (look.value) return;
  let ID = '';
  switch (Number(props.type)) {
    case 1:
      ID = selectUser.value.ID_Class;
      break;
    case 4:
      ID = selectUser.value.ID;
      break;
  }
  try {
    let query = {
      ID,
      Type: props.type,
      StartTime: dateList?.[0],
      EndTime: dateList?.[dateList.length - 1]
    };

    let res = await GetAlreadyScheduleDate(query);
    res.data?.forEach(item => {
      item.Date = item.Date?.slice(0, 10);
    });

    tableList.value = res.data;
    look.value = true;
  } catch (error) {
    console.log(error);
  }
}

function filterDateItem(date) {
  let obj = tableList.value?.find(item => item.Date == date) || {};
  obj.AlreadyCount =
    obj.AlreadyCount?.length > 2
      ? obj.AlreadyCount.slice(0, 2)
      : obj.AlreadyCount;
  return obj.AlreadyCount;
}

function showSelectUser() {
  showUserList.value = true;
  switch (Number(props.type)) {
    case 1:
      title.value = '选择学员';
      break;
    case 4:
      title.value = '选择教师';
      break;
  }
}

function handleRadio(item) {
  selectUser.value = item;
}

async function handleClickDate(date) {
  if (props.type == 1) {
    if (!selectUser.value.ID) return proxy.$modal.msgError('请先选择学员');
    if (!selectUser.value.ID_Class)
      return proxy.$modal.msgError('请先将学员绑定班级');
  }
  if (props.type == 4) {
    if (!selectUser.value.ID) return proxy.$modal.msgError('请先选择教师');
  }
  let ID = '';
  switch (Number(props.type)) {
    case 1:
      ID = selectUser.value.ID_Class;
      break;
    case 4:
      ID = selectUser.value.ID;
      break;
  }
  DateDay.value = date;
  DateDayFormat.value = new Date(date);
  formData.value = {};
  try {
    let query = {
      ID,
      Type: props.type,
      Date: date
    };
    let res = await GetScheduleDateDetail(query);
    res.data?.forEach(item => {
      item.StartAndEnd =
        item.StartTime?.slice(11, 16) + ' -- ' + item.EndTime?.slice(11, 16);
    });
    title.value = '上课信息 ' + DateDay.value;
    exameList.value = res.data?.filter(item => item.Type == 2);
    courseList.value = res.data?.filter(item => item.Type == 1);
    showCourseList.value = true;
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-calendar-table .el-calendar-day) {
  padding: 0;

  .dateBox {
    padding: 10px;
    height: 100%;
  }
}
.courseCount {
  font-weight: bool;
  display: inline-block;
  font-size: 20px;
  border-radius: 50%;
  border: 1px solid rgb(204, 202, 202);
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.courseCountText {
  color: rgb(187, 185, 185);
  line-height: 30px;
  margin-left: 6px;
}
.activeBar {
  background-color: #356df2;
  height: 5px;
  border-radius: 2.5px;
}
.cbtn {
  color: white;
  font-size: 12px;
  border-radius: 3px;
  margin-top: 4px;
  word-break: keep-all;
  text-overflow: ellipsis;
  overflow: hidden;
  &:not(.more) {
    &:nth-child(2) {
      background-color: #356df2;
    }
    &:nth-child(3) {
      background-color: #ff69b4;
    }
  }
  &.more {
    border: 1px solid #ddd;
    color: #000000;
  }
}

:deep(.el-calendar) {
  .el-calendar__body {
    .el-calendar-table {
      border-spacing: 10px;
      background-color: #f4f8ff;
      td {
        border: none !important;
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
      }
    }
  }
}
</style>
